<template>
  <div class="container">
    <header-nav></header-nav>
    <div class="mincard mindWidth">
      <span @click="$router.push('/')">首页</span>>
      <span>服务商查询</span>
    </div>
    <div class="search-content mindWidth">
      <div class="flex items-middle">
        关键字：
        <div class="flex items-middle">
          <input type="text" v-model="form.companyName" />
          <div class="btn" @click="changeValue">搜索</div>
        </div>
      </div>
    </div>
    <div class="content mindWidth">
      <div class="search-list">
        <ul>
          <li v-for="(item,index) in companyList" :key="item.companyId">
            <!-- <span v-html="item.companyName"></span> -->
            <div class="flex items-middle">
              <img :src="imgBaseUrl + item.companyLogo" />
              <div>
                <a :href="`/dedils/${item.id}`" class="name">{{item.companyName}}</a>
                <div class="text">{{item.synopsis || '--'}}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 分页 -->
      <div class="page-content">
        <paging ref="page" @CurrentPage="changePageNo" :total="total" :pageNo="form.pageNo"></paging>
      </div>
    </div>
    <navigation></navigation>
    <footer-nav></footer-nav>
  </div>
</template>
<script>
import { imgBaseUrl, getSerivice } from "../../api/api.js";

import { debounce } from "../../util/throttle.js";
import paging from "../../components/PageQuery.vue";
export default {
  components: {
    paging
  },
  data() {
    return {
      dataName: "",
      companyList: [],
      total: 0,
      imgBaseUrl: imgBaseUrl,
      form: {
        pageNo: 1,
        pageSize: 12,
        companyName: ""
      }
    };
  },
  watch: {
    dataName: debounce(function(e) {
      this.changeValue();
    }, 500)
  },
  async asyncData({ store, route }) {
    let params = {
      pageNo: 1,
      pageSize: 10,
      companyName: ""
    };
    let { result } = await getSerivice(params);
    let total = result.total;
    return {
      companyList: result.records,
      total: total
    };
  },
  mounted() {
    // this.getList()
  },
  methods: {
    changeValue() {
      this.form.pageNo = 1;
      this.companyList = [];
      this.getList();
    },
    getList() {
      getSerivice(this.form).then(res => {
        this.companyList = res.result.records;
        this.total = res.result.total;
      });
    },
    // 切换分页
    changePageNo(value) {
      this.form.pageNo = value;
      this.getList();
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  .mincard {
    span {
      font-size: 14px;
      cursor: pointer;
      margin: 0 10px;
    }
  }
  .search-content {
    background-color: #ffffff;
    box-shadow: #eeeeee -1px 3px 6px;
    padding: 20px 30px;
    box-sizing: border-box;
    input {
      display: inline-block;
      width: 240px;
      height: 32px;
      background: #ffffff;
      border: 1px solid #daeaf5;
      border-radius: 4px 0px 0px 4px;
      box-sizing: border-box;
      padding-left: 12px;
    }
    .btn {
      box-sizing: border-box;
      width: 60px;
      height: 32px;
      line-height: 30px;
      background: #44a2ff;
      border-radius: 0px 4px 4px 0px;
      text-align: center;
      margin-left: -1px;
      color: #ffffff;
      cursor: pointer;
    }
  }
  .content {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 30px;
    // box-shadow: 0 0 10px #ccc;
    margin: 40px auto;

    .search-list {
      width: 100%;
      // min-height: 400px;
      margin: 0 auto;

      ul {
        width: 100%;
        background: #fff;

        li {
          box-sizing: border-box;
          padding: 15px 5px;
          border-bottom: 1px solid rgba(154, 154, 154, 0.2);
          img {
            width: 100px;
            height: 100px;
            margin-right: 20px;
          }
          .name {
            font-size: 18px;
            color: #1678ff;
            cursor: pointer;
          }
          .text {
            font-size: 14px;
            color: #555;
            margin-top: 10px;
          }
        }
      }
    }
    .page-content {
      margin-top: 40px;
      margin-bottom: 60px;
      padding: 0 20px;
      text-align: right;
    }
  }
}
</style>
